<!--{= include ic/admin-header.html }-->

<div class="am-cf admin-main">
  <!--{= include ic/admin-sidebar.html }-->

  <!-- content start -->
  <div class="admin-content">
    <div class="am-cf am-padding">
      <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">内容组</strong> / <small><!--{ if(result){ }-->编辑内容组 - <!--{= result.get("title") }--><!--{ }else{ }-->新建内容组<!--{ } }--></small></div>
    </div>
	
	<div class="am-padding-left"><!--{ if(result){ }--><!--{= result.get("title") }--><!--{ }else{ }-->NewContentGroup<!--{ } }--></div>
    <hr style=" margin-top:0.5rem;" />
	<div class="am-g-fixed am-cf am-padding-left am-padding-bottom">
		<form class="am-form am-u-sm-12 am-form-horizontal am-cf" id="my-form">
			<!--{ if(result){ }-->
				<input id="data-id" type="hidden" value="<!--{= result.id }-->">
			<!--{ } }-->
			<div class="am-u-sm-12">
				<div class="am-form-group">
					<label for="data-title" class="am-u-sm-2 am-form-label">标题</label>
					<div class="am-u-sm-10">
						<input type="text" id="data-title" value="<!--{ if(result){ }--><!--{= result.get("title") }--><!--{ } }-->" placeholder="2-20字符" data-foolish-msg="2-20字符的页面名" minlength="2" maxlength="20" required>
					</div>
				</div>

				<div class="am-form-group">
					<label for="data-name" class="am-u-sm-2 am-form-label">标识</label>
					<div class="am-u-sm-3">
						<input type="text" id="data-name" value="<!--{ if(result){ }--><!--{= result.get("name") }--><!--{ } }-->" placeholder="由英文、数字和下划线组成的唯一标识，长度2-32字符"  minlength="2" maxlength="32" pattern="^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$" required>
					</div>
					<label for="data-templet" class="am-u-sm-offset-2 am-u-sm-2 am-form-label">内页模板</label>
					<div class="am-u-sm-3">
						<select id="data-templet" data-am-selected="{searchBox: 1}">
							<!--{ if(templets){ }-->
							<!--{ for(var i=0;i<templets.length;i++){ }-->
							<option value="<!--{= templets[i].id}-->" <!--{ if(result && result.get("Templet") && result.get("Templet").id==templets[i].id){ }-->selected<!--{ } }-->><!--{= templets[i].get("name")}--></option>
							<!--{ } }-->
							<!--{ } }-->
						</select>
					</div>
				</div>
				
				
				<div class="am-form-group">
					<label for="data-type" class="am-u-sm-2 am-form-label" >数据类型</label>
					<div class="am-u-sm-3">
						<select id="data-type" <!--{ if(results && results.length>0){ }-->class="am-disabled"<!--{ } }--> data-am-selected>
							<option value="Article" <!--{ if(result && result.get("type")=="Article"){ }-->selected<!--{ } }-->>文章</option>
						</select>
					</div>
					<label for="data-perPage" class="am-u-sm-offset-2 am-u-sm-2 am-form-label">每页条数</label>
					<div class="am-u-sm-3">
						<input type="number" id="data-perPage" value="<!--{ if(result){ }--><!--{= result.get("perPage") }--><!--{ }else{ }-->10<!--{ } }-->"  min="0"  required>
					</div>
				</div>
			</div>
		</form>
		<hr class="am-u-sm-12 am-fl am-cf" />
		<div class="am-u-sm-12 am-fl">
			<table class="am-table am-table-striped am-table-hover table-main">
				<thead>
				  <tr>
					<th class="table-check"><input type="checkbox" /></th><th class="table-cacheName">标题</th><th class="table-title">作者</th><th class="table-date am-hide-sm-only">创建日期</th><th class="table-set">操作</th>
				  </tr>
				</thead>
				<tbody>
				<!--{ for(var i=0;i<pager.pagesize;i++){ }-->
					<!--{ if(i<results.length){ }-->
					<tr>
					  <td><input type="checkbox" /></td>
					  <td><a href="/admin/article/edit?id=<!--{= results[i].id }-->&group=<!--{= result.id }-->"><!--{= results[i].get('title') }--></a></td>
					  <td><!--{= results[i].get("author") }--></td>
					  <td class="am-hide-sm-only"><!--{= moment(results[i].createdAt).zone(-8).format('YYYY年MM月DD日 HH:mm:ss') }--></td>
					  <td>
						<div class="am-btn-toolbar">
						  <div class="am-btn-group am-btn-group-xs">
							<div class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="gotoUrl('/admin/article/edit?id=<!--{= results[i].id }-->&group=<!--{= result.id }-->')"><span class="am-icon-pencil-square-o"></span> 编辑</div>
							<div class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only" onclick="deleteOne('<!--{= results[i].id }-->','article','/admin/contentGroup/edit?id=<!--{= result.id }-->')"><span class="am-icon-trash-o"></span> 删除</div>
						  </div>
						</div>
					  </td>
					</tr>
					<!--{ }else{ }-->
					<tr>
					  <td colspan="7">&nbsp;</td>
					</tr>
					<!--{ } }-->
				<!--{ } }-->
				</tbody>
			</table>
			<hr />
			<div class="am-cf">
			  共 <!--{= pager.total }--> 条记录
				<div class="am-fr">
				<ul class="am-pagination">
				  <li <!--{ if(pager.firstPage==pager.currentPage){ }-->class="am-disabled"<!--{ } }-->><a href="edit?id=<!--{= result.id }-->&page=<!--{= pager.firstPage }-->&pagesize=<!--{= pager.pagesize }-->">«</a></li>
				  <!--{ for(var i=0;i<pager.pageArray.length;i++){ }-->
					  <!--{ if(pager.pageArray[i]==pager.currentPage){ }-->
					  <li class="am-active"><a href="javascript:void(0)"><!--{= pager.pageArray[i] }--></a></li>
					  <!--{ }else{ }-->
					  <li><a href="edit?id=<!--{= result.id }-->&page=<!--{= pager.pageArray[i] }-->&pagesize=<!--{= pager.pagesize }-->"><!--{= pager.pageArray[i] }--></a></li>
					  <!--{ } }-->
				  <!--{ } }-->
				  <li <!--{ if(pager.lastPage==pager.currentPage){ }-->class="am-disabled"<!--{ } }-->><a href="edit?id=<!--{= result.id }-->&page=<!--{= pager.lastPage }-->&pagesize=<!--{= pager.pagesize }-->">»</a></li>
				</ul>
				</div>
			</div>
			<hr />
			<p></p>
		</div>
		<hr class="am-u-sm-12 am-fl am-cf" />
		<div class="am-g am-u-sm-8 am-fl am-cf">
			<div class="am-u-sm-offset-1 am-u-sm-3">
				<div class="am-btn am-btn-default" onclick="history.go(-1)">返回列表</div>
			</div>
			
			<div class="am-u-sm-offset-1 am-u-sm-3 am-u-end">
				<div id="btn-saveEdit" class="am-btn am-btn-primary" onclick="saveEdit(<!--{ if(result){ }-->'<!--{= result.id }-->'<!--{ } }-->)">确认保存</div>
			</div>
			
			<div class="am-u-sm-offset-1 am-u-sm-3">
				<div class="am-btn am-btn-default<!--{ if(!result){ }--> am-disabled<!--{ } }-->" onclick="gotoUrl('/admin/article/edit?group=<!--{= result.id }-->')">新增文章</div>
			</div>
		</div>
		<div class="am-u-sm-12 am-fl am-cf" ></div>
	</div>
  </div>
  <!-- content end -->

</div>

<a class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

<!--{= include ic/admin-footer.html }-->

<script type="text/javascript">
$(function(){
	$("#collapse-nav").addClass("am-in");
});
var validator 	= $('#my-form').validator({submit: function(e) {
	if(this.isFormValid()){
		$.AMUI.progress.start();
		$.post("save", {
			"ajax"		: true,
			"id"		: $('#data-id').val(), 
			"title"		: $('#data-title').val(), 
			"name"		: $('#data-name').val(), 
			"templet"	: $('#data-templet').val(), 
			"perPage"	: $('#data-perPage').val(), 
			"type"		: $('#data-type').val()
		},function(data){
			$.AMUI.progress.done();
			$("#btn-saveEdit").removeClass("am-disabled");
			if(typeof(data)=="object" && typeof(data.error)=="undefined"){
				mAlert({
					title:"提示",
					text:"保存成功！",
					onConfirm:function(e) {
						gotoUrl('list');
					}
				});
			}else{
				console.dir(data);
				mAlert({
					title:"错误",
					text:data.error,
					onConfirm:function(e) {}
				});
			}
		}, "json");
	}else{
		$("#btn-saveEdit").removeClass("am-disabled");
	}
	return false;
}});

function saveEdit(){
	$("#btn-saveEdit").addClass("am-disabled");
	validator.submit();
}
</script>